<!DOCTYPE html>
<html lang="en">

<head>
    <title>环形效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./circle.css" />
</head>

<body>
    <div class="header">
        <span class="reduce img">-</span>
        <span class="add img">+</span>
        <span class="title-big">CSS中环形效果的实现方案</span>
    </div>
    <div class="layout">
        <!--  第一种方案-->
        <div class="contain box1">
            <div class="descript">
                <span class="title">环形效果如下所示： </span><br>
                <img src="./image/circle2.png"/><br>
                <p class="lemma">环形效果的特点就是：多个颜色条交替排列，相邻颜色条之间的过渡是突变的效果；
                        所以，可以用颜色突变的方案来实现环形效果；</p>
               
            </div>
        </div>
        <!--  第二种方案-->
        <div class="contain box2">
             <p class="left"> 
             <span class="title"> 方案1：多个元素层叠</span><br>
                <img src="./image/circle1.png"/>
            </p>
               <p class="right">
                    这个方案的思路比较直观，就是用多个单色填充的元素以相同的中心位置层叠，元素可以通过border-radius实现圆形效果，越小的圆形越靠上
                    ，</p>
        </div>
        <div class="contain box3 green ">  
               
                        此方案优点：<br> 
                        1:用单个元素实现，不用添加冗余元素；<br> 
                        2:可以实现任意多颜色的交替重复的网格；<br> 
                        3:通过合理地组合渐变，可以实现多种形状的网格；<br>
                        <p class="red">
                        此方案缺点：<br>
                        
                        添加了较多冗余的元素；<br>
                        需要根据圆环计算条个元素的尺寸；<br>
                    </p>
        
        </div> 
        <div class="contain box4"> 
                   <p>
                       
                     <span class="title">方案2：径向渐变</span><br>
                    <span class="back">background-image:</span><br>   
                          repeating-radial-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);
                    <span class=" step step2-2">
                        </span>
                    </p>
                    
    </div>
    <div class="contain box5 green ">  
            
                     此方案优点：<br> 
                     1:用单个元素实现，不用添加冗余元素；<br> 
                     2:可以实现任意多颜色的交替重复的环形；<br> 
                     3:能实现圆环、椭环以及多种图形层叠出的圆形；<br> 
                     <p class="red">
                     此方案缺点：<br>
                     
                     实现方环时较麻烦；
                     
                 </p>
     
     </div> 
     <div class="contain box6"> 
            <p>
                
              <span class="title">方案3：多重阴影</span><br>
             <span class="back">background-image:</span><br>   
             border-radius: 10%; 
             box-shadow: 0 0 0 10px red, 
                                  0 0 0 20px green , 
                                  0 0 0 30px blue;
             <span class="  step3-1">
                 </span>
             </p>
             
</div>
<div class="contain box7 green ">  
     
              此方案优点：<br> 
              1:用单个元素实现，不用添加冗余元素；<br> 
              2:可以实现任意多颜色的交替的环形；<br> 
              3:能实现圆环、椭环、方环、扇形环等等，一切圆角可实现的形状的环类效<br> 
              <p class="red">
              此方案缺点：<br>
              
             1: 对于重复的环形，必须通过手动设置来实现；<br>
              2:阴影不会影响布局，而且也不会受到box-sizing属性的影响，不过可以通过内边距或外边距（这取决于阴影是内阴影还是外阴影）来模拟出阴影所占据的空间；<br>
             3: 当阴影是外阴影时，阴影区域不会响应鼠标事件；<br>
              
          </p>

</div> 

       
    </div>
    <script src="./circle.js"></script>
</body>

</html>